
class List {
    constructor() {
        this.getData();
        this.bindEve();
        this.today=1;
        //节流防抖
        this.lock=false;
    }
    //点击绑定事件
    bindEve() {
        this.$('.sk_bd ul').addEventListener('click', this.addCart.bind(this));
        //设定滚动条事件
        window.addEventListener('scroll',this.loaDing);
        //分页的点击
        this.$('.pagination').addEventListener('click', this.paging);
    }
 //分页
    paging=(eve)=>{
        //console.log(eve.target);
        let note=eve.target
        console.log(note);
        let num =5;
        this.today=num*(note.innerHTML-0)+1;
        //清空上一页的数据
        
         this.$('.sk_bd ul').innerHTML='';
        //console.log(this.$('.sk_bd ul').innerHTML);
        this.loaDing();

    }
    //懒加载
    loaDing=()=>{
     //获取滚动条高度  可视窗口高度  商品高度
     let top=document.documentElement.scrollTop;
     let client=document.documentElement.clientHeight;
    let tp=this.$('.shangGao').offsetHeight ;
    // 当商品高度小于 窗口高度和滚动条高度
     if((tp+400)<top+client){
        if(this.lock) return
        this.lock=true;
        setTimeout(()=>{
            this.lock=false
        },1000)
        if(this.today%5 ==0) return
        this.getData(++this.today);
        
     }
    }
   

    //获取数据
    async getData(page=1) {
        //console.log(111);
        //发送axios请求
        let { data, status } = await axios.get('http://localhost:8888/goods/list?current='+page);
        //console.log(goods);
        //console.log(data,status);
        //判断 data 和status 值
        if (data.code != 1 && status != 200) throw new Error('获取数据失败。。。')
        let html = '';
        //将数据渲染到 网页中
        data.list.forEach(goods => {
            //console.log(goods);
            html += `<li data-id="${goods.goods_id}">
                <div class="body-box">
                    <div class="body-box-img ">
                        <img src="${goods.img_big_logo}" class="imgOne">
                    </div>
                    <div class="box-name">
                    ${goods.title}
                    </div>
                    <div class="body-box-rmb">
                    ${goods.current_price}
                    </div>
                    <div class="body-box-choose">
                        <div class="bd-cbox-1 ">
                        <a href="#node" class="sk_goods_buy">立即抢购</a>
                        </div>
                    </div>
                </div>
            </li>`
        });
        //console.log(html);
        // this.$('.sk_bd ul').innerHTML += html;
      
        if(this.today%5 !=0)
            this.$('.sk_bd ul').innerHTML += html;
           

    }
    //加入购物车
    addCart(eve) {
        //console.log(this);
        //获取点击的事件源
        //console.log(eve.target);
        //当点击的为图片时候
        if(eve.target.nodeName=='IMG'){
            //console.log(eve.target);
            location.assign('./shopping.html')
        }
        //判断点击的是否为A
        if (eve.target.nodeName != 'A' || eve.target.classList != 'sk_goods_buy') return;
        //console.log(eve.target);
        let token = localStorage.getItem('token');
        //console.log(token);
        //如果没有token值，那么久跳转到登陆页面
        if (!token) location.assign('./login.html?ReturnUrl=./product.html')

            //准备获取购物车相关列表
        let goodsId =eve.target.parentNode.parentNode.parentNode.parentNode.dataset.id;
         //console.log(eve.target.parentNode.parentNode.parentNode.parentNode.dataset.id);
       let userId = localStorage.getItem('user_id'); 
        this.addGetCart(goodsId,userId);

    }
    addGetCart(gId,uId){
        //console.log(gId,uId);
        //发送请求 获取购物车信息
        const AUTH_TOKEN=localStorage.getItem('token')
        let param =`id=${uId}&goodsId=${gId}`;
        //axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;   
        axios.post('http://localhost:8888/cart/add',param).then(({data,status})=>{
        //console.log(data,status);
        //判断状态是否成功
        if(data.code==1&&status==200){
            layer.open({
                title: '添加成功'
                ,content: '去购物车还是留下来呢'
                ,btn:['再看看','去吧']
                ,btn2: function(index, layero){
                    //console.log(222);
                    location.assign('./cart2.html')
                } 
              })
        } else if(status==200 && data.code==401){
            location.assign('./login.html')
        } else{
            layer.open({
                title: '添加失败'
                ,content: '走错了'
                ,time:5000 
              })
        }
        })
    }

    //获取节点
    $(ele) {
        let res = document.querySelectorAll(ele);
        return res.length == 1 ? res[0] : res;
    }

}
new List;